<script setup lang="ts">
import { provide, reactive, ref } from "vue";
import { UserRegisterRequest } from "../../generated";
import { useUser } from "@/store/user";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";

const form = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  userAvatar: "",
  userName: "",
  userProfile: "",
} as UserRegisterRequest);

let user = useUser();
let { stateRegister, registerRoutes } = storeToRefs(useUser());
const router = useRouter();

function gotoThis(index: number) {
  router.push(registerRoutes.value[index]);
}
</script>

<template>
  <h1 style="text-align: center">请注册</h1>
  <a-row>
    <a-col :span="10" :offset="7" class="login-page">
      <a-space direction="vertical" size="large" style="width: 100%">
        <div class="father">
          <a-breadcrumb>
            <template v-if="stateRegister > 0">
              <a-breadcrumb-item
                @click="gotoThis(0)"
                class="item-bread"
                style="color: greenyellow"
                ><span>账号,密码</span>
              </a-breadcrumb-item>
            </template>
            <template v-else>
              <a-breadcrumb-item
                @click="gotoThis(0)"
                class="item-bread"
                style="color: orange"
                ><span>账号,密码</span>
              </a-breadcrumb-item>
            </template>
            <template v-if="stateRegister > 0.3">
              <a-breadcrumb-item
                @click="gotoThis(1)"
                class="item-bread"
                style="color: greenyellow"
                ><span>基本信息</span>
              </a-breadcrumb-item>
            </template>
            <template v-else-if="stateRegister > 0">
              <a-breadcrumb-item
                @click="gotoThis(1)"
                class="item-bread"
                style="color: orange"
                ><span>基本信息</span>
              </a-breadcrumb-item>
            </template>
            <template v-else>
              <a-breadcrumb-item @click="gotoThis(1)" class="item-bread"
                ><span>基本信息</span>
              </a-breadcrumb-item>
            </template>
            <template v-if="stateRegister > 0.6">
              <a-breadcrumb-item
                @click="gotoThis(2)"
                class="item-bread"
                style="color: greenyellow"
                ><span>信息补充</span>
              </a-breadcrumb-item>
            </template>
            <template v-else-if="stateRegister > 0.3">
              <a-breadcrumb-item
                @click="gotoThis(2)"
                class="item-bread"
                style="color: orange"
                ><span>信息补充</span>
              </a-breadcrumb-item>
            </template>
            <template v-else>
              <a-breadcrumb-item @click="gotoThis(2)" class="item-bread"
                ><span>信息补充</span>
              </a-breadcrumb-item>
            </template>
          </a-breadcrumb>
          <a-progress
            :steps="3"
            status="success"
            :stroke-width="50"
            :percent="stateRegister"
            :show-text="false"
            size="large"
          />
        </div>
        <router-view />
      </a-space>
    </a-col>
  </a-row>
</template>

<style scoped>
.father {
  font-size: 20px;
  text-align: center;
}

.login-page {
  background-color: white;
  padding: 40px;
  border-radius: 1ch;
  border: 1px solid #f5f5f5;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.item-bread span {
  cursor: pointer;
}
</style>
